import { useState, useCallback, useEffect } from 'react';
import Edit from './edit';
import {feeListAPI} from '../../utils/api'
import type { TableProps,PaginationProps,DatePickerProps} from 'antd';
import { Button, Form,Table, Input,Select,Pagination,DatePicker } from 'antd';
import dayjs from 'dayjs';

const Fee = () => {
  console.log('父组件函数再次执行了');
  const { RangePicker } = DatePicker;

  const showTotal: PaginationProps['showTotal'] = (total) => `总共 ${total} 条记录`;

 

  const [open, setOpen] = useState(false);
  // 翻页
  // const [page, setPage] = useState(1);
  const [params,setParams]=useState<AnyObject>({key:"",name:"",houseno:"",begindate:null,enddate:null,state:null,page:1,psize:10})
  const [data,setData]=useState<AnyObject[]>([])
  const [total,setTotal]=useState(0);

  //列名
  const columns: TableProps<AnyObject>['columns'] = [
    {
      title: '楼栋名',
      dataIndex: 'building',
      key: 'building'
    },
    {
      title: '房间号',
      dataIndex: 'houseno',
      key: 'houseno'
    },
    {
      title: '姓名',
      dataIndex: 'userName',
      key: 'userName'
    },
    {
      title: '联系方式',
      dataIndex: 'mobile',
      key: 'mobile'
    },
    {
      title: '账期',
      dataIndex: 'id',
      key: 'id',
      render:(text,row)=>(
        <>
        {dayjs(row.begindate).format('YYYY年M月D日')} 至 {dayjs(row.enddate).format('YYYY年M月D日')}
        </>
      )
    },
    {
      title: '导入时间',
      dataIndex: 'addtime',
      key: 'addtime',
      render:(text)=>(
        <>
        {dayjs(text).format('YYYY-MM-DD HH:mm')}
        </>
      )
    },
    {
      title: '操作',
      dataIndex: 'id',
      render:(text)=>(
        <>
        <Button type="primary" onClick={() => del(text)}>删除</Button>
        <Button type="primary">修改</Button>
        </>
      )
    }
  ]

  const close = useCallback(() => setOpen(false), []);

  //删除
  const del=(id:number)=>{
    

    alert(id);
  }

  //列表接口请求
  const getData=async ()=>{

    const res=await feeListAPI(params);
    if(res.errCode===10000){

      setData(res.data.list)
      setTotal(res.data.counts);
    }

    console.log(11111,res);
    

  }

  useEffect(()=>{
    getData();
  },[params])
  //搜索表单提交
  const onFinish=(values:AnyObject)=>{

    setParams({...params,page:1,...values});
  

  }
  //获取选择账期的日期控件值

  const rangeChange: DatePickerProps['onChange']=(value, dateString)=>{

    console.log(1111111111,value);
    
    console.log(222222222222,dateString);

 setParams({...params,begindate:dateString[0],enddate:dateString[1]});

    

  }

  const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
  //全选
  const rowSelection: any = {
    selectedRowKeys,
    onChange: (newSelectedRowKeys:any,selectedRows:any)=>{
      console.log(999999,newSelectedRowKeys);
      console.log(88888,selectedRows);
      
      setSelectedRowKeys(newSelectedRowKeys);

    },
  }

const pageChange=(page:number, pageSize:number)=>{

  console.log(page,pageSize);
  
 
    setParams({...params,page,psize:pageSize});
  

}

  return (
    <div>

      
      <Button type="primary" onClick={() => setOpen(true)}>添加</Button>
      {/* <button onClick={() => setPage(page + 1)}>翻页{page}</button> */}
      {
        open &&  <Edit open={open} close={close} />
      }

      <div>
        
      <Form   name="horizontal_login" layout="inline" onFinish={onFinish}>

      <Form.Item
        name="state"
        label="状态"
      >
        <Select
         style={{ width: 120 }}
      options={[
        { value: 0, label: '未缴费' },
        { value: 1, label: '已缴费' },
      ]}
    />
      </Form.Item>
      <Form.Item
        name="houseno"
        label="房间号"
      >
        <Input />
      </Form.Item>

      <Form.Item
        label="账期"
      >
         <RangePicker format="YYYY-MM-DD" onChange={rangeChange}/>
      </Form.Item>

      <Form.Item
        name="name"
        label="姓名"
      >
        <Input />
      </Form.Item>

     
      <Form.Item >
      <Button htmlType="submit" type="primary">搜索</Button>
      </Form.Item>

      </Form>
      </div>
      <div style={{margin:"20px 0px"}}>
      <Table rowSelection={rowSelection} rowKey="id" pagination={false} columns={columns} dataSource={data} />

      </div>
      <div style={{display:"flex",justifyContent:"center",margin:"20px"}}>
        
      <Pagination pageSizeOptions={[10, 20, 50, 100]} onChange={pageChange}  showTotal={showTotal} current={params.page} total={total} />
      </div>
    
    </div>
  );
}
export default Fee;
